<!-- @format -->

<template>
  <div>
    huchenyang
    <div class="all">
      <div class="left">
        <el-form
          :model="ruleForm"
          :rules="rules"
          ref="ruleForm"
          label-width="100px"
          class="demo-ruleForm"
        >
          <el-form-item label="姓名" prop="name">
            <el-input v-model="ruleForm.name" class="input"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="ruleForm.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="ruleForm.state" placeholder="选择状态">
              <el-option label="激活" value="激活"></el-option>
              <el-option label="未激活" value="未激活"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="年龄" prop="age">
            <el-input v-model="ruleForm.age" class="input"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="ruleForm.email" class="input"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="submitForm('ruleForm')"
              >立即创建</el-button
            >
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="right" v-if="isChange">
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" class="input"></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-radio-group v-model="form.sex">
              <el-radio label="男"></el-radio>
              <el-radio label="女"></el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item label="状态">
            <el-select v-model="form.state" placeholder="选择状态">
              <el-option label="激活" value="激活"></el-option>
              <el-option label="未激活" value="未激活"></el-option>
            </el-select>
          </el-form-item>

          <el-form-item label="年龄" prop="age">
            <el-input v-model="form.age" class="input"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="form.email" class="input"></el-input>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="change(form)">立即修改</el-button>
            <el-button @click="close">关闭</el-button>
          </el-form-item>
        </el-form>
      </div>
    </div>
    <div>
      姓名:
      <el-input placeholder="请输入内容" v-model="svalue.name" class="input">
      </el-input>
      性别:<el-select v-model="svalue.sex" placeholder="请选择">
        <el-option
          v-for="item in sexoptions"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      状态:<el-select v-model="svalue.state" placeholder="请选择">
        <el-option
          v-for="item in stateoptions"
          :key="item.id"
          :label="item.label"
          :value="item.value"
        >
        </el-option>
      </el-select>
      时间:<el-date-picker
        v-model="svalue.time"
        type="datetimerange"
        range-separator="至"
        start-placeholder="开始日期"
        end-placeholder="结束日期"
      >
      </el-date-picker>

      <el-button type="primary" @click="search(svalue)">搜索</el-button>
      <el-button @click="clearS">清空</el-button>
    </div>
    <el-table :data="tableData" border style="width: 100%">
      <el-table-column prop="name" label="姓名" width="180"> </el-table-column>
      <el-table-column prop="age" label="年龄" width="180"> </el-table-column>
      <el-table-column prop="sex" label="性别"> </el-table-column>
      <el-table-column prop="state" label="状态"> </el-table-column>
      <el-table-column prop="cTime" label="创建时间"> </el-table-column>

      <el-table-column prop="todo" label="操作">
        <template v-slot="{ row }">
          <el-button type="primary" @click="read(row)">查看</el-button>
          <el-button type="danger" @click="remove(row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script>
export default {
  data() {
    return {
      //性别option
      sexoptions: [
        { id: 1, label: '男', value: '男' },
        { id: 2, label: '女', value: '女' }
      ],
      stateoptions: [
        {
          id: 1,
          label: '激活',
          value: '激活'
        },
        { id: 2, label: '未激活', value: '未激活' }
      ],
      //搜索结果
      searchResult: [],
      //数据回显
      form: {},
      //搜索值
      svalue: {
        name: '',
        sex: '',
        time: '',
        state: ''
      },
      //存储
      tableDataSaved: [],
      //是否显示
      isChange: false,
      tableData: [
        {
          name: '王小虎',
          sex: '男',
          age: '2',
          cTime: '上海市普陀区金沙江路 1518 弄'
        },
        {
          name: '2016-05-04',
          sex: '王小虎',
          age: '2',
          cTime: '上海市普陀区金沙江路 1517 弄'
        },
        {
          name: '2016-05-01',
          sex: '王小虎',
          age: '2',
          cTime: '上海市普陀区金沙江路 1519 弄'
        },
        {
          name: '2016-05-03',
          sex: '王小虎',
          age: '2',
          cTime: '上海市普陀区金沙江路 1516 弄'
        }
      ],
      ruleForm: {
        name: '',
        sex: '',
        email: '',
        age: '',
        state: '',
        time: new Date().getTime()
      },
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        sex: [{ required: true, message: '性别', trigger: 'change' }],
        email: [{ required: false, message: '邮箱', trigger: 'blur' }],
        age: [{ required: false, message: '年龄', trigger: 'blur' }],
        state: [{ required: true, message: '状态', trigger: 'change' }]
      }
    };
  },
  computed: {},
  mounted() {
    let newData = localStorage.getItem('tableData') || '';
    if (newData) {
      this.tableData = JSON.parse(newData);
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate(valid => {
        if (valid) {
          alert('创建成功');
          let obj = {
            name: '',
            age: '',
            sex: '',
            cTime: new Date().toLocaleString(),
            email: '',
            state: '',
            time: new Date().getTime()
          };
          obj.name = this.ruleForm.name;
          obj.age = this.ruleForm.age || '';
          obj.sex = this.ruleForm.sex;
          obj.email = this.ruleForm.email || '';
          obj.state = this.ruleForm.state;
          this.tableData.push(obj);
          this.$refs[formName].resetFields();
          this.save(this.tableData);
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    resetForm(formName) {
      this.$refs[formName].resetFields();
    },
    //删除
    remove(row) {
      let num = this.tableData.indexOf(row);
      this.tableData.splice(num, 1);
      this.save(this.tableData);
    },
    //修改数据
    change(form) {
      console.log(form);
      console.log(this.form.cTime);
      let res = this.tableData.find(item => item.cTime == this.form.cTime);
      let num = this.tableData.indexOf(res);
      console.log(num);
      this.tableData.splice(num, 1, form);
      this.save(this.tableData);
    },
    //保存数据
    save(data) {
      localStorage.setItem('tableData', JSON.stringify(data));
    },
    //搜索
    search(key) {
      console.log(key);
      if (key) {
        //新建空数组用于存放结果
        let arr = [];
        if (key.time.length > 0) {
          let startTime = key.time[0].getTime();
          let endTime = key.time[1].getTime();
          console.log(startTime);
          console.log(endTime);
          //时间戳
          let res = this.tableData.filter(item => {
            return (
              item.name == key.name &&
              item.sex == key.sex &&
              item.state == key.state
            );
          });
          //过滤出满足条件的然后再进行时间戳的比较
          res.forEach(item => {
            if (startTime <= item.time && item.time <= endTime) {
              arr.push(item);
            }
          });
          //存放至搜索结果
          this.searchResult = arr;
          this.tableDataSaved = this.tableData;
          this.tableData = this.searchResult;
        }
      }
    },
    //查看
    /**
     * 查看
     * @row {string} ？？？
     */
    read(row) {
      this.isChange = true;
      this.form = { ...row };
    },
    close() {
      this.isChange = false;
    },
    //清空搜索条件
    clearS() {
      this.svalue = {};
      this.tableData = this.tableDataSaved;
    }
  }
};
</script>
<style scoped>
.all {
  overflow: hidden;
}
.left {
  float: left;
}
.right {
  float: right;
}
.input {
  width: 300px;
}
</style>
